<script lang="ts" setup>
// #region 引入包, 函数和组件
import { reactive } from 'vue'
import Form from './FormTemplate.vue' // 表单模版
import { loginApi } from '@/service' // 登录接口
import type { LoginParams } from '@/service/type' // 登录参数类型
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const emits = defineEmits<{
  change: []
}>()
const router = useRouter()
// #endregion

// #region // 变量
const form = reactive({
  username: '',
  password: '',
})
// #endregion

// #region // 函数
const success = (params: LoginParams) => {
  loginApi(params)
    .then((res) => {
      console.log(res.data)
      if (res.data.code === 0) {
        ElMessage({
          type: 'success',
          plain: true,
          message: res.data.msg,
        })
        localStorage.setItem('token', res.data.token)
        router.push('/')
      } else if (res.data.code == -1) {
        ElMessage({
          type: 'error',
          plain: true,
          message: res.data.msg,
        })
      }
    })
    .catch((error) => console.log(error))
}
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <Form
    title="登录"
    v-model:form="form"
    @change="emits('change')"
    @success="success($event!)"
    msg="没有账号? 去注册~"
    text="登录"
  ></Form>
</template>

<style lang="scss" scoped></style>
